﻿@using RuoVea.ExUtil
@{
    Layout = "_Layout";
    ViewData["Title"] = "横道图";
}
<el-row style="margin-bottom:10px;" type="flex" align="center" :gutter="20">
    <el-col :xs="12" :sm="15" :md="15" :lg="16" :xl="19">
        <div class="grid-content bg-purple">
            项目:
            <el-select v-model="options.selected" clearable placeholder="请选择项目" class="elmy" size="mini" v-on:change="handleSelect">
                <el-option v-for="item in options.projects" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
        </div>
    </el-col>
    <el-col :xs="12" :sm="9" :md="9" :lg="8" :xl="5" style="text-align: right;">
        <el-button type="primary" size="mini" icon="el-icon-plus" plain v-on:click="handleRecenterAdd">{{this.i18n.t('addnew')}}</el-button>
    </el-col>
</el-row>
<gantt-elastic ref="ganttElastic" v-if="tasksData.length >0" :tasks="tasksData" :options="options" :dynamic-style="dynamicStyle" v-on:handleselect="handleSelect" v-on:recenteradd="handleRecenterAdd"></gantt-elastic>
<el-empty description="无数据" v-else></el-empty>

<el-extend-dialog :dialog-visible="dialogVisible" :submit="submitForm" :cancel="handleClose" :footer-visible="footerVisible" dialog-title="计划管理" :dialog-width="dialogWidth" dialog-top="5px">
    <el-form :model="formData" :rules="formRules" ref="formRef" size="small" label-width="6em" label-suffix=":">
        <el-row>
            <el-col :span="12">
                <el-form-item key="typeId" label="类别" prop="typeId">
                    <el-select v-model="formData.typeId" placeholder="请选择类别" class="elmy">
                        <el-option v-for="item in TypeOptions" :key="item.value" :label="item.text" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item key="label" label="任务名称" prop="label">
                    <el-input v-model="formData.label" v-bind:placeholder="i18n.t('pleaseenter')" autocomplete="off" class="elmy" required></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item key="ganttTime" label="任务时间" prop="ganttTime">
                    <el-date-picker v-model="formData.ganttTime" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" class="elmy"></el-date-picker>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item key="percent" label="进度" prop="percent">
                    <el-input-number v-model="formData.percent" :min="0" :step="1" :max="100" label="描述文字" class="elmy"></el-input-number>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item key="statusId" label="状态" prop="statusId">
                    <el-select v-model="formData.statusId" placeholder="请选择状态" class="elmy">
                        <el-option v-for="item in StatusOptions" :key="item.value" :label="item.text" :value="item.value" :style="{ color: item.color }"> </el-option>
                    </el-select>
                </el-form-item>
            </el-col>


            <el-col :span="12">
                <el-form-item key="levelId" label="优先级" prop="levelId">
                    <el-select v-model="formData.levelId" placeholder="请选择优先级" class="elmy">
                        <el-option v-for="item in LevelOptions" :key="item.value" :label="item.text" :value="item.value" :style="{ color: item.color }"> </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item key="dependentOns" label="紧前任务"  prop="dependentOns">
                    <el-select v-model="formData.dependentOns" clearable placeholder="请选择紧前任务" class="elmy">
                        <el-option v-for="item in TasksOptions" :key="item.value" :label="item.text" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item key="parentId" label="上级任务" prop="parentId">
                    <el-select v-model="formData.parentId" clearable placeholder="请选择上级任务" class="elmy">
                        <el-option v-for="item in TasksOptions" :key="item.value" :label="item.text" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            @*             <el-col :span="12">
            <el-form-item key="user" label="用户" prop="user">
            <el-input v-model="formData.user" placeholder="示例:system_config_list" autocomplete="off" class="elmy"></el-input>
            </el-form-item>
            </el-col> *@
        </el-row>
    </el-form>
</el-extend-dialog>
@section Scripts {
    <script src="~/js/day.js"></script>
    <script src="~/js/GanttElastic.umd.js"></script>
    <script src="~/js/Header.umd.js"></script>

    <script>
        const app = new Vue({
            el: "#main",
            components: { 'gantt-header': Header, 'gantt-elastic': GanttElastic },
            data() {
                return {
                    tasksData: [],
                    options: {
                        size: "12",
                        taskMapping: { progress: "percent" },
                        maxHeight: 1400,
                        maxRows: 100,
                        title: { label: "任务视角", html: false },
                        scope: { before: 3, after: 5 },
                        row: { height: 20, width: 12 },
                        times: { timesScale: 60 * 1000, timeZoom: 21 },
                        base: { fill: "blue", stroke: "blue" },
                        chart: {
                            progress: { bar: false },
                            text: { offset: 0, display: true },
                            expander: { type: 'chart', display: true, displayIfTaskListHidden: true, offset: 4 }
                        },
                        locale: {
                            name: "ch",
                            Now: "当前时间",
                            "Now Show": "none",
                            "X-Scale": "缩放宽度",
                            "X-Scale-Show": "none",
                            "Zoom-X": "缩放宽度",
                            "Zoom-X-Show": "none",
                            "Y-Scale": "高",
                            "Y-Scale-Show": "none",
                            "Task list width": "宽1",
                            "Task list width Show": "none",
                            "Before/After": "时间跨度",
                            "Before/After Show": "none",
                            "Display task list": "显示列头",
                            weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                        },
                        calendar: {
                            workingDays: [1, 2, 3, 4, 5],
                            gap: 0,
                            strokeWidth: 5,
                            hour: { display: false }
                        },
                        taskList: {
                            expander: { straight: false },
                            columns: [
                                { id: 20, label: "任务名称", value: "label", width: 200, expander: true, html: false, events: { click: ($event) => this.handleRecenterEdit($event.data) } },
                                { id: 15, label: "状态", width: 50, value: task => `<a id="${task.statusId}" style="background-color:${task.statusColor};padding:2px 5px;color:#fff;border-radius:5px;">${task.statusName}</a>`, html: true, events: { click: ($event) => this.handleRecenterEdit($event.data) } },
                                { id: 40, label: "开始日期", value: task => dayjs(task.start).format("YYYY-MM-DD"), width: 85, canSort: true, events: { click: ($event) => this.handleRecenterEdit($event.data) } },
                                { id: 50, label: "结束日期", value: task => dayjs(task.end).format("YYYY-MM-DD"), width: 85, events: { click: ($event) => this.handleRecenterEdit($event.data) } },
                                { id: 50, label: "工期", width: 50, style: { "task-list-header-label": { "text-align": "center", width: "100%" }, "task-list-item-value-container": { "text-align": "center", width: "100%" } }, value: task => task.durationDays },
                                { id: 65, label: "优先级", width: 60, value: task => `<a id="${task.levelId}" style="background-color:${task.levelColor};padding:5px 10px;color:#fff;border-radius:10px;">${task.levelName}</a>`, html: true, events: { click: ($event) => this.handleRecenterEdit($event.data) } },
                                { id: 70, label: "进度", value: "progress", width: 50, style: { "task-list-header-label": { "text-align": "center", width: "100%" }, "task-list-item-value-container": { "text-align": "center", width: "100%" } }, events: { click: ($event) => this.handleRecenterEdit($event.data) } },
                                { id: 65, label: "删除", width: 60, value: task => `<a id="${task.id}" style="background-color:#F56C6C;padding:5px 8px;color:#fff;border-radius:10px;">删除</a>`, html: true, events: { click: ($event) => this.handleDelete($event.data) } },
                            ]
                        },
                        selected: undefined,
                        projects: [],
                    },
                    dynamicStyle: { 'task-list-header-label': { 'font-weight': 'bold' } },
                    destroy: false,

                    dialogVisible: false,
                    footerVisible: true,
                    dialogWidth: "40%",
                    loading: false,
                    formInitData: {
                        label: null,
                        percent: 0,
                        typeId: null,
                        statusId: null,
                        levelId: null,
                        dependentOns: null,
                        parentId: null,
                        user: "",
                    },
                    formData: {
                        label: null,
                        percent: 0,
                        typeId: null,
                        statusId: null,
                        levelId: null,
                        dependentOns: null,
                        parentId: null,
                        user: "",
                    },
                    formRules: {
                        label: [{ required: true, message: '请输入任务名称', trigger: 'blur' },],
                        ganttTime: [{ required: true, message: '请选择任务时间', trigger: 'change' },],
                        typeId: [{ required: true, message: '请选择类别', trigger: 'change' },],
                        statusId: [{ required: true, message: '请选择状态', trigger: 'change' },],
                        levelId: [{ required: true, message: '请选择优先级', trigger: 'change' },],
                    },

                    TasksOptions: [],
                    TypeOptions: [],
                    StatusOptions: [],
                    LevelOptions: [],
                    selectData: {}
                };
            },
            created() {
                this.handleLoadTypeData();
                this.handleLoadStatusData();
                this.handleLoadLevelData();
            },
            mounted() {
                this.handleLoadProjectData();
            },
            methods: {
                handleLoadProjectData() {
                    this.$http.post("/project/list", { async: false }).then((res) => {
                        if (res) {
                            this.options.projects = res.rows;
                            if (res.rows.length > 0) {
                                this.options.selected = this.options.projects[0].id
                                this.handleLoadData(this.options.selected);
                                this.handleLoadTasksData(this.options.selected);
                            }
                            else {
                                this.Alert.info("请先维护项目.", () => { });
                            }
                        }
                    });
                },
                handleLoadData(projectId) {
                    let curry = { pageNo: 1, pageSize: 31 };
                    var data = { ...curry, ...projectId };
                    data.projectId = projectId;
                    this.$http.post("/gantt/pages", data, { async: false }).then((res) => {
                        debugger;
                        this.tasksData = res;
                    });
                },
                handleSelect(value) {
                    this.options.selected = value;
                    this.handleLoadTasksData(value);
                    this.handleLoadData(value);
                },
                handleLoadTasksData(projectId) {
                    this.TasksOptions = [];
                    this.$http.get("/gantt/tasks/" + projectId, { async: true }).then((res) => {
                        if (res)
                            this.TasksOptions = res.map(x => ({ value: x.id, text: x.name }));
                    });
                },
                handleLoadTypeData() {
                    this.$http.post("/gantt/type", { async: true }).then((res) => {
                        if (res)
                            this.TypeOptions = res.rows.map(x => ({ value: x.id, text: x.name }));
                    });
                },
                handleLoadStatusData() {
                    this.$http.post("/gantt/status", { async: true }).then((res) => {
                        if (res)
                            this.StatusOptions = res.rows.map(x => ({ value: x.id, text: x.name, color: x.color }));
                    });
                },
                handleLoadLevelData() {
                    this.$http.post("/gantt/level", { async: true }).then((res) => {
                        if (res)
                            this.LevelOptions = res.rows.map(x => ({ value: x.id, text: x.name, color: x.color }));
                    });
                },
                handleRecenterAdd() {
                    if (this.options.projects.length <= 0) {
                        this.Alert.info("请先维护项目.", () => { });
                    } else {
                        this.dialogVisible = true;
                        this.formData = this.formInitData;
                    }
                },

                handleRecenterEdit(e) {
                    this.dialogVisible = true;
                    this.formData = e;
                },
                handleDelete(e) {
                    this.$confirm(`${this.i18n.t('confirmdelete')} : ${e.label}`, this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'error', customClass: "elmessagebox" })
                        .then(() => {
                            this.$http.delete("gantt/delete/" + e.id).then((res) => {
                                if (res) {
                                    this.$message({ message: "操作成功", center: true, type: 'success' });
                                    this.handleLoadData(this.options.selected);
                                    this.dialogVisible = false;
                                }
                            });
                        })
                        .catch(_ => { console.info(_); })
                },
                handleClose(e) {
                    this.dialogVisible = e;
                },
                submitForm(taskId) {
                
                    this.$refs["formRef"].validate((valid) => {
                        if (valid) {
                            const [start, end] = this.formData.ganttTime;
                            var data = { ...this.formData, ...{ projectId: this.options.selected } };
                            data.start = start;
                            data.end = end;
                            this.$http.post("/gantt/submit", data)
                                .then((res) => {
                                    if (res) {
                                        this.$message({ message: "操作成功", center: true, type: 'success' });
                                        this.handleLoadData(this.options.selected);
                                        this.dialogVisible = false;
                                    }
                                });
                        }
                    });
                }
            }
        });
    </script>
}